<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react</title>
</head>
<body>
  <div id="root"></div>

  <script type="text/javascript" src="./components/react.development.js"></script>
  <script type="text/javascript" src="./components/react-dom.development.js"></script>
  <script type="text/javascript" src="./components/babel.min.js"></script>

  <script type="text/babel">
    // 封装真正可复用的 Clock 组件
    class Clock extends React.Component {

      // 正确地使用 State
      /*
        不要直接修改 State
        例如，此代码不会重新渲染组件：
        // wrong
        this.state.comment = 'Hello';
        // 而是应该使用 setState();
        // Correct
        this.setState({comment: 'Hello'});
        // 构造函数是唯一可以给this.state 赋值的地方

        State 的更新可能是异步的

        // Wrong
        this.setState({
          counter: this.state.counter + this.props.increment,
        });

        // Correct
        this.setState((state, props) => ({
          counter: state.counter + props.increment
        }))

        State的更新会被合并
        当你调用setState()的时候，React会把你提供的对象合并到当前的state
        例如：你的state包含几个独立的变量:
        constructor (props) {
          super(props);
          this.state = {
            posts: [],
            comments: []
          }
        }

        // 然后你可以分别调用setStatae()来单独地更新它们
        componentDidMount () {
          fetchPosts().then(response => {
            this.setState({
              posts: reponse.posts
            })
          })

          fetchComments().then(response => {
            this.setState({
              comments: reponse.comments
            })
          })
        }

        // 这里的合并是浅合并，所以 this.setState({comments})完整保留了this.state.posts, 但是完全替换了this.state.comments
      */

      render () {
        return (
          <div>
            <h1>Hello,world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Clock />,
      document.getElementById('root')
    )
    
  </script>
</body>
</html>